{% extends 'application01/base.html' %}
{% block page_header %}
<h1>主题</h1>
{% endblock page_header %}
{% block content %}
<div class="container mt-4">
    <div class="list-group border-bottom pb-2 mb-4">
        {% for topic in topics %}
        <div class="card mb-3 shadow">
            <div class="card-body">
                <a href="{% url 'application01:topic' topic.id %}" class="text-dark">
                    <h5 class="card-title">{{ topic.text }}</h5>
                </a>
            </div>
        </div>
        {% empty %}
        <div class="alert alert-info" role="alert">
            还没有添加任何主题。
        </div>
        {% endfor %}
    </div>
    <div class="d-flex justify-content-end mt-3">
        <a href="{% url 'application01:new_topic' %}" class="btn btn-primary">添加新主题</a>
    </div>
</div>
{% endblock content %}